<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-main>
      <router-view :key="key"></router-view>
    </el-main>
    <el-footer>
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script>
import Header from './_partials/header.vue'
import Footer from './_partials/footer.vue'
export default {
  components: {
    Header,
    Footer
  },
  computed: {
    key () {
      return this.$route.path + Math.random()
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.el-main {
  flex: 1 0 auto;
}

.el-footer {
  flex: 0 0 auto;
  width: 100%;
}
</style>
